<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>css3-花朵绽放</title>
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="keywords" content="css3train,css,Style,css3,animation,transition,rollover,webkit,moz,3D,WEB编程,前端开发,css3实例,源码下载">
<meta name="description" content="对于设计人员和开发人员来说，CSS一直是web设计过程中重要的一部分，随着CSS3的出现以及越来越多的浏览器对它的支持，设计师们有了 更多的选择。用纯CSS也可以实现各种各样很酷的效果了，甚至是动画。虽然有些效果不能跨浏览器运行，有些只是展示并没什么实际用途，但仅用CSS实现出的这些效果似乎没什么可以挑剔的。..所以本站为css3爱好者提供css3实例!">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="generator" content="Editplus ">
<meta name="author" content="Author：走起来,QQ群：197326136">
<meta name="robots" content="ALL">
<meta name="copyright" content="www.css3train.com"> 
<style type="text/css">
.huaduo3d{
	-webkit-perspective: -800px;/*3d场景*/
	position: relative;
}
span{
	width:75px;
	height:50px;
	display:block;
	position:absolute;
	top:100px;
	left:200px;
	background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#8f0025), to(#ff005a));
	border-radius: 82px 0;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 0 100%;
}
i{
	display:block;
	height:14px;
	border-right:1px solid yellow;
	position:absolute;
	top:100px;
	left:200px;
}
i.huarui1{left:194px;-webkit-transform: rotate(-10deg) translate(0,-3px);}
i.huarui2{left:197px;}
i.huarui3{top:98px;left:199px;}
i.huarui4{left:201px;}
i.huarui5{left:203px;}
.huaduo1{

	-webkit-transform: rotate(-60deg) translate(10px,-3px);
}
.huaduo2{
	background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#8f0025), to(#ff005a));
	-webkit-transform: rotate(-68deg);
}
.huaduo3{
	-webkit-transform: rotate(-46deg) translate(5px,0);
}
.huaduo4{
	z-index:2;
	-webkit-transform: rotate(-56deg);
}

@-webkit-keyframes huaban1{
  100%{-webkit-transform: rotateX(40deg) rotateZ(-60deg) translate(13px,-10px);}
}
@-webkit-keyframes huaban2{
  100%{-webkit-transform:rotateX(-10deg) rotateY(-20deg) rotateZ(-100deg);}
}
@-webkit-keyframes huaban3{
  100%{-webkit-transform:rotateX(30deg) rotateY(-20deg) rotateZ(-10deg);}
}
@-webkit-keyframes huaban4{
  100%{_-webkit-transform:rotateX(-80deg) rotateZ(-50deg);-webkit-transform:rotateX(-60deg) rotateZ(-50deg);}
}
</style>
</head>
<body>
<div class="huaduo3d" style="width:500px;height:500px;">
	<span class="huaduo1" style="-webkit-animation: huaban1 10s ease alternate forwards 1s; -webkit-animation-play-state: initial;"></span>
	<span class="huaduo2" style="-webkit-animation: huaban2 10s ease alternate forwards 1s; -webkit-animation-play-state: initial;"></span>
	<span class="huaduo3" style="-webkit-animation: huaban3 10s ease alternate forwards 1s; -webkit-animation-play-state: initial;"></span>
	<span class="huaduo4" style="-webkit-animation: huaban4 10s ease alternate forwards 1s; -webkit-animation-play-state: initial;"></span>
	<i class="huarui1"></i>
	<i class="huarui2"></i>
	<i class="huarui3"></i>
	<i class="huarui4"></i>
	<i class="huarui5"></i>
</div>
<script>
	var aSpan = document.getElementsByTagName('span'),
		oDiv = document.getElementsByTagName('div')[0];
	
	oDiv.onclick = function(){
		for(var i=0;i<aSpan.length;i++){
			aSpan[i].style['-webkit-animation'] = 'huaban'+(i+1)+' 10s ease alternate';
			aSpan[i].style['-webkit-animation-fill-mode'] = 'forwards';
		}
	};
	
</script>

</body></html>